import React from "react";
type IeventCom={
    handleClick:(e:any)=>void
    handleClick2:(e:any)=>void
}
class EventCom extends React.Component<any,any>{
    constructor(props:any){
        super(props)
        this.state={
            name:'小杨爱喝柠檬水'
        }

        this.handleClick2=this.handleClick2.bind(this)
    }
    // handleClick=(data:number,e:any)=>{
    //     // event参数要始终保存在最后面
    //     console.log(e)
    //     this.setState({
    //         name:'柠檬不加糖'
    //     })
    // }
    handleClick(data:number,e:any){
        // event参数要始终保存在最后面，不需要主动传递
        console.log(e)
        this.setState({
            name:'柠檬不加糖'
        })
    }
    
    handleClick2(el:any){
        console.log(this)
    }

    render(): React.ReactNode {
        let el="<h1>一个标签</h1>"
        return(
            <fieldset>
                <legend>事件</legend>
                <h3>{this.state.name}</h3>
                <a href="http://chst.vip" onClick={(e)=>{
                    e.preventDefault() // react中阻止默认行为
                }}>aaa</a>
                {/* 第一种注册事件的方式 */}
                <button onClick={()=>{
                    console.log('111')
                }}>点击1</button>

                {/* 第二种种绑定方式 */}
                {/* 使用箭头函数注册的事件的绑定 */}
                {/* <button onClick={this.handleClick}>点击2</button> */}
                {/* 使用传统函数注册的事件的绑定 */}
                <button onClick={this.handleClick.bind(this,123)}>点击2</button>

                {/* 第三种绑定写法 */}
                <button onClick={this.handleClick2}>点击3</button>

                {/* 渲染html: dangerouslySetInnerHTML */}
                <div className="dv" dangerouslySetInnerHTML={{__html:el}}></div>
            </fieldset>
        )
    }
}

export default EventCom